<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <script type="text/javascript" src="js/rem.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <title>校园饭堂信息可视化平台</title>
</head>

<body >
    <div class="container-flex" tabindex="0" hidefocus="true">
        <div class="box-left">

			<!-- 饭堂打卡人数 -->
            <div class="left-top">
                <div class="current-num">
                    <div>今日饭堂打卡人数</div>
                    <p id="people">123,456,789</p>
                </div>
            </div>

			 <!-- 饭堂窗口热度 -->
            <div class="left-center">
                <div class="title-box">
                    <h6>饭堂窗口热度</h6>
                </div>
                <div class="chart-box">
                    <div id="pie" style="width:97%;height:100%;"></div>
                </div>
            </div>

			<!-- 窗口平均消费价格 -->
            <div class="left-bottom" class="select">
                <div class="title-box">
                    <h6>窗口平均消费价格</h6>
                </div>
                    <div class="chart-box">
                        <div id="open" style="width:100%;height:90%;"></div>
                    </div>
            </div>
        </div>
        
        <div class="box-center">
            <div class="center-top">
                <h1>校园饭堂信息可视化平台</h1>
            </div>

            <!-- 天气预报 -->
            <div class="center-center">
                <div class="weather-box">
                    <div class="data">
                        <p class="time" id="time">00:00:00</p>
                        <p id="date"></p>
                    </div>
                    <div class="weather">
                        <img id="weatherImg" src="images/weather/weather_img01.png" alt="">
                        <div id="weather">
                            <p class="active">多云</p>
                            <p>16-22℃</p>
                            <p>广州市海珠区</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 饭堂区域图 -->
            <div class="center-bottom">
                 <!-- <div class="chart-box">
                    <div id="chart4" style="width:100%;height:95%;"></div> 
                </div>  -->
                <img class="center-img" src="images/district.jpg" alt=""> 
            </div>
        </div>

        <div class="box-right">
            <!-- 学生基本消费 -->
            <div class="right-top">
                <div class="title-box">
                    <h6 id="barTitle">学生基本消费</h6>
                </div>
                <div class="chart-box">
                    <div id="chart3" style="width:100%;height:100%;"></div>
                </div>
            </div>

            <!-- 饭堂菜单展示 -->
            <div class="right-center">
                <div class="title-box">
                    <h6 id="barTitle">饭堂菜单展示</h6>
                    <div class="select" tabindex="0" hidefocus="true">
                        <div class="select-div">窗口选择</div>
                        <ul class="select-ul menu"> 
                            <li class="active" data-value="">一楼自选</li>
                            <li data-value="1"`>一楼粉面饺子</li>
                            <!-- <li data-value="2">一楼盖浇饭</li> -->
                            <li data-value="3">一楼汤饭</li>
                          
                            <li data-value="4">一楼水果捞</li>
                            <li data-value="5">一楼麻辣烫</li>
                            <li data-value="6">二楼自选</li>
                           
                            <li data-value="7">二楼糖水甜品</li>
                            <li data-value="8">二楼滑蛋盖饭</li>
                            <li data-value="9">二楼炸串小吃</li>
                            <li data-value="10">二楼韩式盖饭</li> 
                        </ul>
                    </div>
                </div>
           
                    
                    <div class="data-box" style="display: block;" >
                        <table class="table1 ">  
                            <tr class="bg-color">
                                <td >土豆焖鸭</td>
                                <td >西蓝花炒肉片</td>
                                <td >卤鸡腿</td>
                                <td >清蒸草鱼</td>
                            </tr>
                            <tr class="bg-color">
                                <td >苦瓜炒蛋</td>
                                <td >蚝油虾</td>
                                <td >外婆菜炒蛋</td>
                                <td >香菇滑鸡</td>
                            </tr>
                            <tr class="bg-color">
                                <td >红烧排骨</td>
                                <td >酸豆角</td>
                                <td >黄焖鸡</td>
                                <td >红烧牛腩</td>
                            </tr>
                            <tr class="bg-color">
                                <td >鱼香茄子</td>
                                <td >鸡翅</td>
                                <td >酱香排骨</td>
                                <td >肉沫茄子</td>
                            </tr>
                            <tr class="bg-color">
                                <td rowspan="2">手撕包菜</td>
                                <td rowspan="2">板栗烧鸡</td>
                                <td rowspan="2">白灼菜心</td>
                                <td rowspan="2">麻婆豆腐</td>
                            </tr>
                        </table>
                        </div>
                     <div class="data-box"  ><!--粉面饺子-->
                            <table class="table1 ">  
                                <tr class="bg-color">
                                    <td >砂锅米粉</td>
                                    <td >酸汤水饺</td>
                                    <td >瘦肉面</td>
                                    <td >拉面</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >云吞面</td>
                                    <td >美味拌面</td>
                                    <td >热干面</td>
                                    <td >螺蛳粉</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >青菜面</td>
                                    <td >扬州炒面</td>
                                    <td >青菜面</td>
                                    <td >扬州炒面</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >砂锅粉</td>
                                    <td >炒面</td>
                                    <td >砂锅粉</td>
                                    <td >炒面</td>
                                </tr>
                                <tr class="bg-color">
                                    <td rowspan="2">砂锅粉</td>
                                    <td rowspan="2">炒面</td>
                                    <td rowspan="2">砂锅粉</td>
                                    <td rowspan="2">炒面</td>
                                </tr>
                            </table>
                         </div>
                    <div class="data-box"  > <!--汤饭-->
                            <table class="table1 ">  
                                <tr class="bg-color">
                                    <td >招牌牛肉汤饭</td>
                                    <td >牛肉萝卜汤饭</td>
                                    <td >牛杂汤饭</td>
                                    <td >辣白菜牛肉汤饭</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >经典汤饭</td>
                                    <td >西红柿牛肉汤饭</td>
                                    <td >金针菇汤饭</td>
                                    <td >牛肉丸汤饭</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >猪肚鸡汤饭</td>
                                    <td >瘦肉汤饭</td>
                                    <td >瘦肉枸杞汤饭</td>
                                    <td >乌鸡汤饭</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >莲藕排骨汤饭</td>
                                    <td >冬瓜排骨汤饭</td>
                                    <td >猪杂汤饭</td>
                                    <td >猪杂枸杞汤饭</td>
                                </tr>
                                <tr class="bg-color">
                                    <td rowspan="2">虫花草汤饭</td>
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                </tr>
                            </table>
                            </div>
                     <div class="data-box"  > <!--水果-->
                                <table class="table1 ">  
                                    <tr class="bg-color">
                                        <td >哈密瓜</td>
                                        <td >西瓜</td>
                                        <td >菠萝</td>
                                        <td >草莓</td>
                                    </tr>
                                    <tr class="bg-color">
                                        <td >芒果</td>
                                        <td >青芒</td>
                                        <td >橙子</td>
                                        <td >圣女果</td>
                                    </tr>
                                    <tr class="bg-color">
                                        <td >猕猴桃</td>
                                        <td >葡萄</td>
                                        <td >梨子</td>
                                        <td >苹果</td>
                                    </tr>
                                    <tr class="bg-color">
                                        <td >网纹瓜</td>
                                        <td >桑葚</td>
                                        <td >木瓜</td>
                                        <td >石榴</td>
                                    </tr>
                                    <tr class="bg-color">
                                        <td rowspan="2">火龙果</td>
                                        <td rowspan="2">水蜜桃</td>
                                        <td rowspan="2">杨梅</td>
                                        <td rowspan="2"></td>
                                    </tr>
                                </table>
                            </div>
                        <div class="data-box"  > <!--麻辣烫-->
                                    <table class="table1 ">  
                                        <tr class="bg-color">
                                            <td >里脊肉</td>
                                            <td >牛筋丸</td>
                                            <td >肥牛卷</td>
                                            <td >炸鱼丸</td>
                                        </tr>
                                        <tr class="bg-color">
                                            <td >娃娃菜</td>
                                            <td >炸面筋</td>
                                            <td >土豆片</td>
                                            <td >炸腐竹</td>
                                        </tr>
                                        <tr class="bg-color">
                                            <td >热狗</td>
                                            <td >鸭血</td>
                                            <td >虾饺</td>
                                            <td >玉米肠</td>
                                        </tr>
                                        <tr class="bg-color">
                                            <td >上海蛋饺</td>
                                            <td >脆皮肠</td>
                                            <td >蟹柳</td>
                                            <td >金针菇</td>
                                        </tr>
                                        <tr class="bg-color">
                                            <td rowspan="2">莲藕</td>
                                            <td rowspan="2">海带结</td>
                                            <td rowspan="2">生菜</td>
                                            <td rowspan="2">空心菜</td>
                                        </tr>
                                    </table>
                          </div>
                       <div class="data-box"  > <!--二楼自选-->
                            <table class="table1 ">  
                                <tr class="bg-color">
                                    <td >油豆腐炒肉</td>
                                    <td >葱油鸡</td>
                                    <td >咖喱鱼蛋</td>
                                    <td >清蒸娃娃菜</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >鸡蛋肉蒸饼</td>
                                    <td >酸菜卤肉</td>
                                    <td >铁板炒青菜</td>
                                    <td >土豆蒸排骨</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >爆炒墨鱼花</td>
                                    <td >白切鸡</td>
                                    <td >锅包肉</td>
                                    <td >冬菇蒸鸡</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >番茄炒蛋</td>
                                    <td >豆腐泡</td>
                                    <td >酿豆腐</td>
                                    <td >丝瓜炒肉</td>
                                </tr>
                                <tr class="bg-color">
                                    <td rowspan="2">清炒土豆丝</td>
                                    <td rowspan="2">凉瓜炒蛋</td>
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                </tr>
                            </table>
                        </div>
                        <div class="data-box"  > <!--糖水甜品-->
                            <table class="table1 ">  
                                <tr class="bg-color">
                                    <td >香芋糖水</td>
                                    <td >番薯糖水</td>
                                    <td >紫薯糖水</td>
                                    <td >椰汁西米露</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >杨枝甘露</td>
                                    <td >海带绿豆汤</td>
                                    <td >莲子百合汤</td>
                                    <td >红豆麻薯汤</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >雪耳糖水</td>
                                    <td >鲜奶汤圆</td>
                                    <td >招牌芋圆</td>
                                    <td >红豆糖水</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >芝麻糊</td>
                                    <td >枸杞红糖</td>
                                    <td ></td>
                                    <td ></td>
                                </tr>
                                <tr class="bg-color">
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                </tr>
                            </table>
                         </div>
                         <div class="data-box"  > <!--滑蛋盖饭-->
                            <table class="table1 ">  
                                <tr class="bg-color">
                                    <td >虾仁滑蛋饭</td>
                                    <td >火腿滑蛋饭</td>
                                    <td >腊肠滑蛋饭</td>
                                    <td >牛肉滑蛋饭</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >芝士滑蛋饭</td>
                                    <td >叉烧滑蛋饭</td>
                                    <td >咖喱滑蛋饭</td>
                                    <td >鸡扒滑蛋饭</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >牛排滑蛋饭</td>
                                    <td >梅菜肉饼滑蛋饭</td>
                                    <td >排骨滑蛋饭</td>
                                    <td >猪排滑蛋饭</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >韭黄滑蛋饭</td>
                                    <td ></td>
                                    <td ></td>
                                    <td ></td>
                                </tr>
                                <tr class="bg-color">
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                </tr>
                            </table>
                         </div>
                         <div class="data-box"  > <!--炸串小吃-->
                            <table class="table1 ">  
                                <tr class="bg-color">
                                    <td>火腿</td>
                                    <td>热狗</td>
                                    <td >韭菜</td>
                                    <td >鸡翅</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >金针菇</td>
                                    <td >杏鲍菇</td>
                                    <td >鸡排</td>
                                    <td >蟹柳</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >玉米</td>
                                    <td >牛肉小串</td>
                                    <td >鸡肉小串</td>
                                    <td >鸭肠</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >骨肉相连</td>
                                    <td >豆腐干</td>
                                    <td >掌中宝</td>
                                    <td >墨鱼饼</td>
                                </tr>
                                <tr class="bg-color">
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                </tr>
                            </table>
                         </div>
                         <div class="data-box"  > <!--韩式盖饭-->
                            <table class="table1 ">  
                                <tr class="bg-color">
                                    <td >金州拌饭</td>
                                    <td >金枪鱼拌饭</td>
                                    <td >酱鸡腿肉拌饭</td>
                                    <td >石锅拌饭</td>
                                </tr>
                                <tr class="bg-color">
                                    <td >辣白菜拌饭</td>
                                    <td >酱牛肉拌饭</td>
                                    <td >烤牛肉拌饭</td>
                                    <td ></td>
                                </tr>
                                <tr class="bg-color">
                                    <td ></td>
                                    <td ></td>
                                    <td ></td>
                                    <td ></td>
                                </tr>
                                <tr class="bg-color">
                                    <td ></td>
                                    <td ></td>
                                    <td ></td>
                                    <td ></td>
                                </tr>
                                <tr class="bg-color">
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                    <td rowspan="2"></td>
                                </tr>
                            </table>
                         </div>
    
    
					<ul class="moveul"></ul>
					<!-- 饭堂菜单展示-结束 -->
						
                </div>
            

            <!-- 饭堂留言墙 -->
            <div class="right-bottom">
                <div class="title-box">
                    <h6>饭堂留言墙</h6>
                    <img class="line-img" src="images/line-blue.png" alt="">
                    <button id="mesWall"><img src="images/select_icon.png" alt="">留言</button>
                </div>
                <div class="data-menu">
                    <div class="menuList">
						<div class="contgundong">
							<ul class="moveul"></ul>
						</div>
					</div>
                </div>
            </div>
        </div>
    </div>

    <!-- <div class="container"> -->
        <!-- 留言墙留言功能 -->
        <div id="pop-wall" class="pop-up">
            <div class="edit-div">
                <h4>欢迎留下宝贵的意见</h4>
                <span class="close-edit"></span>
                <div class="set-box">
                    <label for="留言内容"></label>
                    <input class="input-edit" id="editT" type="text" value="">
                </div>
                <div class="set-box edit-box">
                    <!-- <button id="qxEdit">取消</button> -->
                    <button id="qdEdit">确定</button>
                </div>
            </div>
        </div>
    <!-- </div> -->
</body>

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/layer/layer.min.js"></script>
<script type="text/javascript" src="js/layer/laydate/laydate.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript">
    $('#mesWall').click(function () {
            layer.open({
                type: 1,
                title:false,
                skin: 'popWall',
                // btn: ['提交', '取消'],
                // area:auto,
                area: ['700px', '400px'],
                shade: [0.3],
                shadeClose: true, //点击遮罩关闭
                content: $('#pop-wall')
            });
        });
    $('#qdEdit').click(function(){
        var menuAdd = $('#editT').val(); 
        if(menuAdd != ""){
            layer.msg("添加成功", {icon: 6})
        }else{
            layer.msg("请输入留言内容", {icon: 5});
        }
        // console.log(menuAdd);
        // $(".menuList .moveul").html((index, html) => {
		// 	return html += `<li><i></i><span>${menuAdd}</span></li>`
		// })
    })
</script>



</html>